<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>添加课程目录</title>
    <link rel="stylesheet" href="../static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../static/css/public.css" media="all">
    <script src="../static/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
</head>
<style>
    body{
        background-color: white;
    }
    #lookVideo{
        display: none;
    }
    #player{
        object-fit: fill;
        height: 500px;
        width: 800px;
        display: none;
    }
    #subbtn{
        margin-left: -110px;
    }
</style>
<body>
<div class="layui-form">
    <form id="subForm" class="layui-form layui-form-pane" action="" method="get">
        <input type="hidden" id="listId" name="listId">
        <input type="hidden" id="timeMinute" name="timeMinute">
        <input type="hidden" id="timeSecond" name="timeSecond">
        <div class="layui-form-item" lay-filter="myDiv">
            <label class="layui-form-label">课程名称</label>
            <div class="layui-input-inline">
                <select id="courseId" name="courseId" lay-filter="mySelect">
                    <option value="">请选择课程名称</option>
                    <option th:each="course : ${courses}" th:value="${course.courseId}" th:text="${course.courseName}"></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">目录名称</label>
            <div class="layui-input-inline">
                <input id="listName" name="listName" lay-verify="required" type="text" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">本章视频</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="uploadVideo"><i class="layui-icon"></i>上传视频</button>
                <button type="button" class="layui-btn layui-btn-normal" id="lookVideo">查看视频</button>
                <video id="player" controls="controls"></video>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">视频状态</label>
            <div class="layui-input-block">
                <input id="lockState" type="checkbox" name="lockState" lay-skin="switch" lay-filter="switchTest" lay-text="VIP观看|免费观看">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="subbtn" class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn"></button>
            </div>
        </div>
    </form>
</div>
<script src="../static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script th:inline="javascript" type="text/javascript">
    let data={
        listId: null,
        listName: null,
        courseId: null,
        courseName: null,
        videoUrl: null,
        timeMinute: null,
        timeSecond: null,
        lockState: null
    }
    let videoUrl;
    let videoTimeMinute;
    let videoTimeSecond;
    $(function (){
        let courseList=[[${courseList}]];
        if(courseList===null){
            $('#subbtn').html("确认添加");
            submitUrl="/directory/addDirectory";
        }else{
            $('#listId').val(courseList.listId);
            $('#listName').val(courseList.listName);
            $('#courseId').val(courseList.courseId);
            $('#lookVideo').css("display","inline");
            videoUrl=courseList.videoUrl;
            videoTimeMinute=courseList.timeMinute;
            videoTimeSecond=courseList.timeSecond;
            console.log(courseList.lockState);
            console.log(courseList.videoUrl);
            if(courseList.lockState){
                $("#lockState").prop("checked", true);
            }else{
                $("#lockState").prop("checked", false);
            }
            $('#subbtn').html("确认修改");
            submitUrl="/directory/editDirectory";
        }
        layui.form.render(); //重新渲染显示效果
        $('#subForm').submit(function (e){
            let formData=new FormData(this);
            data.listId=formData.get("listId");
            data.listName=formData.get("listName");
            data.courseId=formData.get("courseId");
            data.courseName=$('#courseId option:selected').text();
            if(videoUrl!=null){
                data.videoUrl=videoUrl;
                data.timeMinute=videoTimeMinute;
                data.timeSecond=videoTimeSecond;
            }else{
                layer.msg("视频不能为空");
                return false;
            }
            data.lockState = formData.get("lockState") !== null;
            $.ajax({
                type:"post",
                url:submitUrl,
                data:data,
                success:function (res){
                    if(res.code===200){
                        layer.msg(res.message,{time:5000,icon:1,offset:[15]});
                        let index=parent.layer.getFrameIndex(window.name);
                        setTimeout(function (){
                            window.parent.location.reload();//刷新父页面
                            parent.layer.close(index);
                        },1500);
                    }else{
                        layer.msg(res.message,{time:5000,icon:1,offset:[15]});
                    }
                },
                error:function (error){
                    layer.msg(error,{time:5000,icon:2,offset:[15]})
                }
            })
            e.preventDefault();
        });
        //弹出视频
        $("#lookVideo").click(function () {
            $('#player').attr('src',videoUrl);
            layer.open({
                type: 1,
                title: false,
                closeBtn: 1,
                area: ['auto'],
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                content: $('#player'),
                end:function(){
                    $('#player').css("display","none");
                }
            });
        });
    })
    layui.use(['upload', 'element', 'layer'], function() {
        let $ = layui.jquery
            , upload = layui.upload
            , layer = layui.layer;

        upload.render({
            elem: '#uploadVideo'
            ,url: '/upload/course' //改成您自己的上传接口
            ,method: 'post'
            ,accept: 'video',//视频
            before: function () {
                this.data = {
                    dirName: $('#courseId option:selected').text()
                }
                layer.msg('上传中', {icon: 16, time: 0});
            }
            ,done: function(res){
                if(res.code===200){
                    videoUrl=res.data.url;
                    videoTimeMinute=res.data.minute;
                    videoTimeSecond=res.data.second;
                    $('#lookVideo').css("display","inline");
                    $('#lookVideo').click();
                    return layer.msg('上传成功');
                }else{
                    return layer.msg(res.message);
                }
            },
            error: function (){
                return layer.msg('上传失败');
            }
        });
        //select监听
        form.on('select(mySelect)',function (data){
            console.log("监听课程");
            console.log(data.value);
            $.ajax({
                type:"post",
                url:'/course/courseVIPState',
                data:{
                    courseId:data.value
                },
                success:function (res){
                    console.log("res")
                    console.log(res)
                    if(res.code===200){
                        console.log(res.vipState)
                        if(res.data.vipState){
                            $('#showVip').css("display","inline");
                        }else{
                            $('#showVip').css("display","none");
                        }
                    }else{
                        layer.msg(res.message,{time:5000,icon:1,offset:[15]});
                    }
                },
                error:function (error){
                    layer.msg(error,{time:5000,icon:2,offset:[15]})
                }
            })
            layui.form.render();
        })
    });
</script>
</body>
</html>